<template>
  <!-- 首页 -->
  <view class="dl-wrapper">
    <!-- 顶部标题栏控件 -->
    <u-navbar :is-back="false" :height="55">
      <view style="padding: 0 20rpx">
        <q-search-bar @click="onClick" :disabled="true" />
      </view>
    </u-navbar>

    <!-- 轮播图 -->
    <view class="banner-box">
      <u-swiper
        :list="banners"
        :border-radius="10"
        :interval="5000"
        @click="onClickBannerItem"
        name="pic"
      >
      </u-swiper>
    </view>

    <!-- 推荐歌单 -->
    <view class="common-card scroll-x-box">
      <view class="title-box">
        <view class="sub-title">热门</view>
        <view class="title">推荐歌单</view>
      </view>

      <view class="m-content">
        <scroll-view :scroll-x="true" class="scroll-X">
          <view
            class="poster-list-item"
            v-for="(item, index) in topPlaylist"
            :key="item.id"
            @click="openPlaylistPage(item.id, 1)"
          >
            <view class="image-box">
              <u-image
                width="200rpx"
                height="200rpx"
                border-radius="10"
                :src="item.coverImgUrl + '?param=270y270'"
              />
              <view class="dt-count">
                {{ formatNumber(item.playCount) }}
              </view>
            </view>
            <view
              class="line-2"
              style="word-wrap: break-word; white-space: pre-wrap; -webkit-line-clamp: 2"
              >{{ item.name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 飙升榜 -->
    <view class="common-card scroll-x-box">
      <view class="title-box">
        <view class="sub-title">飙升</view>
        <view class="title">云音乐飙升榜</view>
      </view>

      <view class="m-content">
        <scroll-view :scroll-x="true" class="scroll-X">
          <view
            class="poster-list-item"
            v-for="(item, index) in riseSong"
            :key="item.id"
            @tap="onClickMusicItem(item)"
          >
            <view class="image-box">
              <u-image
                width="200rpx"
                height="200rpx"
                border-radius="10"
                :src="item.al.picUrl + '?param=270y270'"
              />
              <view class="dt-count">
                {{ formatNumber(item.dt) }}
              </view>
            </view>
            <view class="song-name u-line-1">{{ item.name }}</view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 一入电音深似海 -->
    <view class="common-card dy-song-box">
      <view class="title-box">
        <view class="sub-title">风格推荐</view>
        <view class="title">一入电音深似海</view>
      </view>

      <view class="m-content">
        <swiper class="swiper" style="height: 420rpx" :indicator-dots="true" :autoplay="false">
          <block v-for="(num, column) in parseInt(dyTopList.length / 3)" :key="column">
            <swiper-item class="swiper-item">
              <view class="song-list">
                <view
                  class="song-list-item"
                  v-for="(item, index) in dyTopList.slice(column * 3, column * 3 + 3)"
                  :key="item.id"
                  @tap="onClickMusicItem(item)"
                >
                  <u-image
                    width="100rpx"
                    height="100rpx"
                    border-radius="10"
                    :src="item.al.picUrl + '?param=270y270'"
                  ></u-image>
                  <view
                    class="flex-row"
                    style="width: 0; flex: 1; align-items: center; margin: 0 24rpx"
                  >
                    <view class="song-name">{{ item.name }}</view>
                    <view style="margin: 0 10rpx">-</view>
                    <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                  </view>
                  <view style="width: 40rpx">
                    <u-icon name="play-circle" size="48" color="#e51419"></u-icon>
                  </view>
                </view>
              </view>
            </swiper-item>
          </block>
        </swiper>
      </view>
    </view>

    <!-- 古典音乐 -->
    <view class="common-card scroll-x-box">
      <view class="title-box">
        <view class="sub-title">古典</view>
        <view class="title">云音乐古典音乐榜</view>
      </view>

      <view class="m-content">
        <scroll-view :scroll-x="true" class="scroll-X">
          <view
            class="poster-list-item"
            v-for="(item, index) in gdTopList"
            :key="item.id"
            @tap="onClickMusicItem(item)"
          >
            <view class="image-box">
              <u-image
                width="200rpx"
                height="300rpx"
                border-radius="10"
                :src="item.al.picUrl + '?param=270y480'"
              />
              <view class="dt-count">
                {{ formatNumber(item.dt) }}
              </view>
            </view>
            <view class="song-name u-line-1" style="padding: 15rpx 0; margin-top: 0"
              >{{ item.name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 热歌风向标 -->
    <view class="common-card hot-song-box">
      <view class="title-box">
        <view class="sub-title">排行榜</view>
        <view class="title">热歌风向标</view>
      </view>

      <view class="m-content">
        <swiper class="swiper" :indicator-dots="true" :autoplay="false">
          <swiper-item>
            <view class="swiper-item">
              <view class="title">云音乐新歌榜</view>
              <view class="song-list">
                <view
                  class="song-list-item"
                  v-for="(item, index) in topList.newSong"
                  :key="index"
                  @tap="onClickMusicItem(item)"
                >
                  <u-image
                    width="100rpx"
                    height="100rpx"
                    border-radius="10"
                    :src="item.al.picUrl + '?param=270y270'"
                  ></u-image>
                  <view class="index">{{ index + 1 }}</view>
                  <view class="song-name">{{ item.name }}</view>
                  <view style="margin: 0 10rpx">-</view>
                  <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                </view>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <view class="title">云音乐热歌榜</view>
              <view class="song-list">
                <view
                  class="song-list-item"
                  v-for="(item, index) in topList.hotSong"
                  :key="index"
                  @tap="onClickMusicItem(item)"
                >
                  <u-image
                    width="100rpx"
                    height="100rpx"
                    border-radius="10"
                    :src="item.al.picUrl + '?param=270y270'"
                  ></u-image>
                  <view class="index">{{ index + 1 }}</view>
                  <view class="song-name">{{ item.name }}</view>
                  <view style="margin: 010rpx">-</view>
                  <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                </view>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item">
              <view class="title">云音乐说唱榜</view>
              <view class="song-list">
                <view
                  class="song-list-item"
                  v-for="(item, index) in topList.rapSong"
                  :key="index"
                  @tap="onClickMusicItem(item)"
                >
                  <u-image
                    width="100rpx"
                    height="100rpx"
                    border-radius="10"
                    :src="item.al.picUrl + '?param=270y270'"
                  ></u-image>
                  <view class="index">{{ index + 1 }}</view>
                  <view class="song-name">{{ item.name }}</view>
                  <view style="margin: 0 10rpx">-</view>
                  <view class="artist">{{ item.ar.map((v) => v.name).join('/') }}</view>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <u-divider style="padding: 20rpx; background-color: #fff">到底啦</u-divider>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //广告轮播图
        banners: [],
        //网友精选谍，热门歌单
        topPlaylist: [],
        //飙升榜
        riseSong: [],
        //电音榜
        dyTopList: [],
        //古典音乐榜
        gdTopList: [],
        // 热歌风向标
        topList: {
          //新歌榜
          newSong: [],
          //热歌榜
          hotSong: [],
          //说唱榜
          rapSong: [],
        },
      }
    },
    created() {
      this.getBannerList()
      this.initToplist()
    },
    methods: {
      /**
       * 点击搜索框时
       */
      onClick() {
        uni.navigateTo({
          url: '/pages/searchPage/searchPage',
        })
      },
      /**
       * 点击banner广告
       */
      onClickBannerItem(index) {
        let item = this.banners[index]
        // this.openUrl({url: 'http://m.baidu.com'});
      },
      /**
       *  获取广告列表
       */
      getBannerList() {
        this.$api
          .banners({
            data: {
              type: 1,
            },
          })
          .then((data) => {
            this.banners = data.banners
          })
      },
      /**
       * 初始化 热歌风向榜等
       */
      async initToplist() {
        //精选歌单
        let topPlaylist = await this.$api.topPlaylist({ data: { limit: 6, order: 'hot' } })
        this.topPlaylist = topPlaylist.playlists

        //飙升榜
        let riseSongDetail = await this.$api.playlistDetail({ data: { id: 19723756 } })
        this.riseSong = riseSongDetail.playlist.tracks.slice(0, 6)

        //电音
        let dyTopList = await this.$api.playlistDetail({ data: { id: 1978921795 } })
        this.dyTopList = dyTopList.playlist.tracks.slice(0, 9)

        //古典音乐
        let gdTopList = await this.$api.playlistDetail({ data: { id: 71384707 } })
        this.gdTopList = gdTopList.playlist.tracks.slice(0, 9)

        //新歌榜
        let newSongDetail = await this.$api.playlistDetail({ data: { id: 3779629 } })
        this.topList.newSong = newSongDetail.playlist.tracks.slice(0, 3)

        //热歌榜
        let hotSongDetail = await this.$api.playlistDetail({ data: { id: 3778678 } })
        this.topList.hotSong = hotSongDetail.playlist.tracks.slice(0, 3)

        //说唱榜
        let rapSongDetail = await this.$api.playlistDetail({ data: { id: 991319590 } })
        this.topList.rapSong = rapSongDetail.playlist.tracks.slice(0, 3)
      },
      /**
       * 点击音乐
       */
      onClickMusicItem(item) {
        console.debug('onClickMusicItem', item)
        let params = {
          id: item.id,
          name: item.name,
          picUrl: item.al ? item.al.picUrl : '',
        }
        this.openMp3(params)
      },
    },
  }
</script>

<style scoped>
  .dl-wrapper {
    top: var(--status-bar-height);
    bottom: var(--window-bottom);
    width: 100%;
    padding-bottom: 50rpx;
  }

  /* 占满剩下的 */
  .swiper-content {
    width: 100%;
    flex: 1;
  }

  .banner-box {
    padding: 40rpx 20rpx;
    background-color: #fff;
  }

  .swiper {
    height: 100%;
  }

  .swiper-item {
    height: 100%;
  }

  .uni-bg-red {
    background-color: #ff201f;
  }

  .uni-bg-green {
    background-color: #00b26a;
  }

  .uni-bg-blue {
    background-color: #007aff;
  }

  /* 关注swiper-box */
  .focus-box {
    color: #fff;
  }

  .common-card {
    padding: 20rpx;
    margin-top: 40rpx;
    background-color: #fff;
  }

  .common-card .title-box {
    margin-bottom: 24rpx;
  }

  .common-card .title-box .sub-title {
    font-size: 20rpx;
    color: #999;
  }

  .common-card .title-box .title {
    margin-top: 2rpx;
    font-size: 32rpx;
    font-weight: bolder;
  }

  /* //内容 */
  .common-card .m-content {
  }

  .common-card .m-content .swiper {
    height: 520rpx;
  }

  .common-card .m-content .swiper .swiper-item {
    position: relative;
    padding: 24rpx;
    background-color: #f8f8f8;
    border-radius: 24rpx;
    box-sizing: border-box;
  }

  .common-card .m-content .swiper .swiper-item .title {
    margin-bottom: 24rpx;
    font-size: 28rpx;
    font-weight: bolder;
  }

  /* 歌曲列表 */
  .common-card .m-content .swiper .swiper-item .song-list {
  }

  .common-card .m-content .swiper .swiper-item .song-list .song-list-item {
    display: flex;
    width: 100%;
    margin-bottom: 20rpx;
    align-items: center;
  }

  .common-card .m-content .swiper .swiper-item .song-list .song-list-item .index {
    margin: 0 24rpx;
    font-size: 30rpx;
    font-weight: bolder;
  }

  .common-card .m-content .swiper .swiper-item .song-list .song-list-item .song-name {
    font-size: 30rpx;
  }

  .common-card .m-content .swiper .swiper-item .song-list .song-list-item .artist {
    overflow: hidden;
    font-size: 24rpx;
    color: #999;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 横向滚动 */
  .scroll-x-box {
  }

  .scroll-x-box .scroll-X {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }

  .scroll-x-box .scroll-X .poster-list-item {
    display: inline-block;
    width: 200rpx;
    margin-right: 30rpx;
  }

  .scroll-x-box .scroll-X .poster-list-item .image-box {
    position: relative;
    width: 200rpx;
  }

  .scroll-x-box .scroll-X .poster-list-item .image-box .dt-count {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 5rpx;
    font-size: 26rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
  }

  .scroll-x-box .scroll-X .poster-list-item .song-name {
    height: auto;
    margin-top: 8rpx;
    font-size: 26rpx;
    color: #333;
    word-break: normal;
    word-wrap: break-word;
  }
</style>
